import { FC } from 'react'
// @ts-ignore
import Editor from 'react-umeditor';
import Upload from './upload';

interface props {
  content: string,
  setContent: (val: string) => void
}

const CustomEditor: FC = (props) => {

  // @ts-ignore
  const { content, setContent } = props;

  const onContentChange = (content:string) => {
    setContent(content);
  }

  /** 工具栏配置，与官网基本一致 */
  const icons = [
    'source | undo redo | bold italic underline strikethrough fontborder emphasis | ',
    'paragraph fontfamily fontsize | superscript subscript | ',
    'forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | ',
    'cleardoc  | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | ',
    'horizontal date time  | inserttable | image emotion spechars'
  ];

  return (
    <div style={{height: '100%'}}>
      <Editor
        icons={icons}
        value={content}
        defaultValue={content}
        onChange={onContentChange}
        plugins={{
          image: {
            Upload
          }
        }}
      />
    </div>
  )
}

export default CustomEditor;
